import { createRouter, createWebHistory } from 'vue-router';
import { defineAsyncComponent } from 'vue'; // 用于懒加载组件

// 路由组件的懒加载
const App = () => import('../App.vue');
const Login = () => import('../components/Login/login.vue');
// 首页
const Workbench = () => import('../components/Home/Workbench.vue');
const Booking = () => import('../components/Home/Booking.vue');
const Bigscreen = () => import('../components/Home/Bigscreen.vue');
// 用户
const List = () => import('../components/User/List.vue');
const Message = () => import('../components/User/Message.vue');
const Session = () => import('../components/User/Session.vue');
// 设置
const Employee = () => import('../components/Set/Employee.vue');
const Role = () => import('../components/Set/Role.vue');
const User = () => import('../components/Set/User.vue');
const Mima = () => import('../components/Set/Mima.vue');
// 运营
const Lun = () => import('../components/Operation/Lun.vue');
// 数据
const Overview = () => import('../components/Shu/Overview.vue');
const Age = () => import('../components/Shu/Age.vue');
const Sex = () => import('../components/Shu/Sex.vue');
const Social = () => import('../components/Shu/Social.vue');

// 无权限页面
const Unauthorized = () => import("../components/unauthorized.vue");
// 默认登录页面
const DefaultHome = () => import("../components/DefaultHome.vue");

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            component: App,
            children: [
                // 首页
                {
                    path: "/home",
                    name: "home",
                    component: DefaultHome,
                    redirect: "/home/workbench",  // 重定向到 workbench 子路由
                    children: [
                        {
                            path: "workbench",
                            name: "workbench",
                            component: Workbench,
                        },
                        {
                            path: "booking",
                            name: "booking",
                            component: Booking,
                        },
                        {
                            path: "bigscreen",
                            name: "bigscreen",
                            component: Bigscreen,
                            meta: { requiredRole: 'admin' }, // 只有管理员可访问
                        },
                    ]
                },
                // 用户
                {
                    path: "/user",
                    name: "user",
                    component: DefaultHome,
                    redirect: '/user/list',
                    children: [
                        {
                            path: "list",
                            name: "list",
                            component: List,
                        },
                        {
                            path: "message",
                            name: "message",
                            component: Message,
                        },
                        {
                            path: "session",
                            name: "session",
                            component: Session,
                        }
                    ]
                },
                // 设置
                {
                    path: "/set",
                    name: "set",
                    component: DefaultHome,
                    redirect: '/set/suser',
                    children: [
                        {
                            path: "employee",
                            name: "employee",
                            component: Employee,
                            meta: { requiredRole: 'admin' }, // 只有管理员可访问
                        },
                        {
                            path: "role",
                            name: "role",
                            component: Role,
                            meta: { requiredRole: 'admin' }, // 只有管理员可访问
                        },
                        {
                            path: "suser",
                            name: "suser",
                            component: User,
                        },
                        {
                            path: "mima",
                            name: "mima",
                            component: Mima,
                        }
                    ]
                },
                // 运营
                {
                    path: "/operation",
                    namee: "operation",
                    component: DefaultHome,
                    redirect: '/operation/lun',
                    children: [
                        {
                            path: "lun",
                            name: "lun",
                            component: Lun,
                        },
                    ]
                },
                // 数据
                {
                    path: "/shu",
                    name: "shu",
                    component: DefaultHome,
                    redirect: '/shu/Overview',
                    children: [
                        {
                            path: "Overview",
                            name: "Overview",
                            component: Overview,
                        },
                        {
                            path: "age",
                            name: "age",
                            component: Age,
                        },
                        {
                            path: "sex",
                            name: "sex",
                            component: Sex,
                        },
                        {
                            path: "social",
                            name: "social",
                            component: Social,
                        }
                    ]
                },
                {
                    path: "/",
                    redirect: '/login',
                }
            ]
        },
        // 登录
        {
            path: "/login",
            component: Login,
        },
        {
            path: '/unauthorized',
            component: Unauthorized, // 无权限页面
        },
        // {
        //     path: "/:pathMatch(.*)*",  // 捕捉所有未定义的路径
        //     redirect: '/login',        // 默认登录页
        // },
    ]
})

// 路由守卫：检查登录状态和角色
router.beforeEach((to, from, next) => {
    const userRole = sessionStorage.getItem('roleid') || "nologin";
    const requiredRole = to.meta.requiredRole; // 获取当前路由要求的角色
    // 如果需要认证且用户未登录
    if (userRole === "nologin") {
        if (to.path === '/login') {
            return next(); // 如果用户已在登录页，直接继续
        }
        return next('/login'); // 如果未登录，跳转到登录页面
    }
    // 如果是管理员，允许访问任何页面
    if (userRole === "admin") {
        return next(); // 允许继续访问任何页面
    }
    // 如果是用户且访问需要特定角色的页面，检查角色
    if (userRole === "user" && requiredRole === "admin") {
        return next('/unauthorized'); // 如果角色不匹配，跳转到无权限页面
    }

    // 如果角色符合要求，继续路由
    next();
});

export default router